<template>
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel overflow-x">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="最近:">
              <el-radio-group v-model="radioData" class="search-radio-group" @change="changeRadio()">
                <el-radio :label="'3t'">3天</el-radio>
                <el-radio :label="'7t'">一周</el-radio>
                <el-radio :label="'1y'">一月</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="query.startDate"
                type="datetime"
                placeholder="选择日期"
                format="yyyy-MM-dd HH"
                value-format="yyyy-MM-dd HH"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="query.endDate"
                type="datetime"
                placeholder="选择日期"
                format="yyyy-MM-dd HH"
                value-format="yyyy-MM-dd HH"
                :clearable="false"
              />
            </el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button v-loading="exportLoading" type="primary" @click="handleExport">导出</el-button>
            <el-button v-show="showData" type="primary" @click="handleChange(true)">切换曲线</el-button>
            <el-button v-show="showLine" type="primary" @click="handleChange(false)">切换表格</el-button>
          </el-form>
        </div>
        <div class="">
          <div v-if="!showData" class="choose-outlet-panel">请导航树选择对应节点</div>
          <el-table
            v-if="showData"
            ref="multipleTable"
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 320px)"
            :data="tableData"
          >
            <el-table-column fixed="left" align="center" type="index" width="80" />
            <el-table-column fixed="left" prop="realTimeStr" label="时间" width="140" />
            <template v-for="(item, index) in tableHead">
              <el-table-column :key="index + '_head'" align="center" :label="item.label">
                <template v-if="item.listTableColum.length !== 0">
                  <el-table-column
                    v-for="(it, ide) in item.listTableColum"
                    :key="ide + 'list'"
                    :prop="it.prop"
                    :label="it.label"
                    min-width="120"
                  />
                </template>
              </el-table-column>
            </template>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0 && showData"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="handleSelectTable"
            />
          </div>
          <div v-if="showLine" style="height: calc(100vh - 320px);">
            <LineChart
              ref="chars"
              v-loading="lineLoading"
              :chart-data="chartData"
              time-type="{h}:{i}"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OutletTree from '@/components/Tree/outletTree'
import Pagination from '@/components/Pagination'
import { downloadFileHasFile } from '@/utils'
import { exportHourData, selectHourData, selectHourBrokenData } from '@/api/dataQuery/dataQuery'
import { getDatefmt } from '@/utils/common'
import LineChart from './components/LineChart'
export default {
  name: 'HourData',
  components: {
    Pagination, OutletTree, LineChart
  },
  data() {
    return {
      isWide: true,
      dateFmt: 'yyyy-MM-dd hh',
      tableLoading: true,
      query: {
        startDate: null, endDate: null, outletId: null,
        total: 0,
        page: 1,
        limit: 20
      },
      // 存储是列的属性:列的值
      tableData: [],
      tableHead: [],
      radioData: '3t',
      showData: false,
      showLine: false,
      lineLoading: false,
      exportLoading: false,
      chartData: {}
    }
  },
  created() {
    this.changeRadio()
  },
  methods: {
    handleChange(val) {
      this.showLine = val
      this.handleQuery()
    },
    handleQuery() {
      if (this.query.outletId === null) {
        this.$message.warning('请选择排口')
        return
      }
      if (this.showLine) {
        this.showData = false
        this.handleSelectLine()
      } else {
        this.showData = true
        this.handleSelectTable()
      }
    },
    // 查询曲线
    handleSelectLine() {
      this.lineLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      selectHourBrokenData(query).then(res => {
        if (res.data.data === null || res.data.data.length === 0) {
          this.$message.warning('该排口暂无数据')
        } else {
          this.chartData = res.data.data
        }
        this.lineLoading = false
      })
    },
    // 查询表格
    handleSelectTable() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      selectHourData(query).then(res => {
        this.tableData = []
        this.tableHead = []
        this.tableHead = res.data.column
        var recordsTemp = res.data.page.records
        if (recordsTemp != null) {
          for (let i = 0; i < recordsTemp.length; i++) {
            var temp = recordsTemp[i]
            // 计算因子 id
            var factorDtoList = temp.factorDtoList
            if (factorDtoList != null) {
              for (let j = 0; j < factorDtoList.length; j++) {
                var factorDto = factorDtoList[j]
                temp['cl_avg' + factorDto.factorLibraryId] = factorDto.avgVal === null ? '--' : this.returnFloat(factorDto.avgVal)
                temp['cl_out' + factorDto.factorLibraryId] = factorDto.emissionsVal === null ? '--' : this.returnFloat(factorDto.emissionsVal)
                temp['cl_min' + factorDto.factorLibraryId] = factorDto.minVal === null ? '--' : this.returnFloat(factorDto.minVal)
                temp['cl_max' + factorDto.factorLibraryId] = factorDto.maxVal === null ? '--' : this.returnFloat(factorDto.maxVal)

                temp['cl_zs_avg' + factorDto.factorLibraryId] = factorDto.zsAvgVal === null ? '--' : this.returnFloat(factorDto.zsAvgVal)
                temp['cl_zs_out' + factorDto.factorLibraryId] = factorDto.zsEmissionsVal === null ? '--' : this.returnFloat(factorDto.zsEmissionsVal)
                temp['cl_zs_min' + factorDto.factorLibraryId] = factorDto.zsMinVal === null ? '--' : this.returnFloat(factorDto.zsMinVal)
                temp['cl_zs_max' + factorDto.factorLibraryId] = factorDto.zsMaxVal === null ? '--' : this.returnFloat(factorDto.zsMaxVal)
              }
            }
          }
        }
        this.tableLoading = false
        this.tableData = recordsTemp
        this.query.total = res.data.page.total
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
          // el-table加ref="multipleTable"
        })
      }).catch(reason => {
        this.tableLoading = false
      })
    },
    returnFloat(value) { // 格式化数据 统一小数点后三位，不足的补
      if (value > 9999) {
      	return Math.round(value)
      }
      var value = Math.round(parseFloat(value) * 1000) / 1000
      var xsd = value.toString().split('.')
      if (xsd.length === 1) {
        value = value.toString() + '.000'
        return value
      }
      if (xsd.length > 1) {
        if (xsd[1].length === 1) {
          value = value.toString() + '00'
          return value
        } else {
          if (xsd[1].length === 2) {
            value = value.toString() + '0'
          }
          return value
        }
      }
    },
    handleNodeClick(data) {
      this.query = {
        ...this.query,
        outletId: null,
        total: 0,
        page: 1,
        limit: 20
      }
      if (data.level === 3) {
        this.showData = true
        this.query.outletId = data.id
        this.handleQuery()
      } else {
        this.$message.warning('请选择排口')
      }
    },
    handleExport() {
      this.exportLoading = true
      const query1 = JSON.parse(JSON.stringify(this.query))
      exportHourData(query1).then(result => {
        downloadFileHasFile(result)
        this.exportLoading = false
      }).catch(() => {
        console.log('此处错误')
        this.exportLoading = false
      })
    },
    changeRadio() {
      const date = new Date()
      this.query.endDate = getDatefmt(date, this.dateFmt)
      var charTemp = this.radioData.substring(this.radioData.length - 1, this.radioData.length)
      var charValTemp = parseInt(this.radioData.substring(0, this.radioData.length - 1))
      if (charTemp === 't') {
        this.query.startDate = getDatefmt(new Date(date.setDate(date.getDate() - charValTemp)), this.dateFmt)
      } else if (charTemp === 'y') {
        this.query.startDate = getDatefmt(new Date(date.setMonth(date.getMonth() - charValTemp)), this.dateFmt)
      } else if (charTemp === 'n') {
        this.query.startDate = getDatefmt(new Date(date.getMonth(date.getMonth() - charValTemp)), this.dateFmt)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
